<template>
  <div v-if="totalPages > 1" class="flex justify-center items-center gap-3 mt-12">
    <button 
      class="group flex items-center gap-2 px-6 py-3 bg-white/80 backdrop-blur-sm border border-gray-200 rounded-xl hover:border-indigo-500 hover:text-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 font-medium shadow-sm hover:shadow-lg"
      :disabled="currentPage === 1"
      @click="$emit('changePage', currentPage - 1)"
    >
      <svg class="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      上一页
    </button>
    
    <div class="flex gap-2">
      <button 
        v-for="page in visiblePages" 
        :key="page"
        class="relative px-4 py-3 rounded-xl transition-all duration-300 font-semibold min-w-[44px]"
        :class="page === currentPage 
          ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg scale-105' 
          : 'bg-white/80 backdrop-blur-sm border border-gray-200 text-gray-600 hover:border-indigo-500 hover:text-indigo-500 hover:shadow-md'"
        @click="$emit('changePage', page)"
      >
        {{ page }}
        <div v-if="page === currentPage" class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-white rounded-full" />
      </button>
    </div>
    
    <button 
      class="group flex items-center gap-2 px-6 py-3 bg-white/80 backdrop-blur-sm border border-gray-200 rounded-xl hover:border-indigo-500 hover:text-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 font-medium shadow-sm hover:shadow-lg"
      :disabled="currentPage === totalPages"
      @click="$emit('changePage', currentPage + 1)"
    >
      下一页
      <svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  currentPage: number
  totalPages: number
}

const props = defineProps<Props>()

defineEmits<{
  changePage: [page: number]
}>()

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, props.currentPage - 2)
  const end = Math.min(props.totalPages, props.currentPage + 2)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})
</script>
